<template>
  <div class="user-manage-container">
    <div class="operate-bar">
      <ul>
        <li>
          <el-input
            v-model="roleName"
            placeholder="输入关键字查找"
          ></el-input>
        </li>
      </ul>
      <el-button type="primary">新增用户</el-button>
    </div>
    <CommonTable
      :options="tableConfig.options"
      :columns="tableConfig.columns"
      :actions="tableConfig.actions"
      :data="tableData"
      @handleSelectionChange="handleSelectionChange"
      @handleSortChange="handleSortChange"
    ></CommonTable>
    <CommonPagination
      :options="paginationOptions"
      :dataSource="getTableData"
    ></CommonPagination>
  </div>
</template>

<script>
import CommonTable from '@/components/CommonTable.vue';
import CommonPagination from '@/components/CommonPagination.vue';
import { demoGet } from '@/api/demo';

export default {
  name: 'UserManage',
  components: {
    CommonTable,
    CommonPagination
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          // height: 0,
          height: this.tableMaxHeight,
          hasSelection: true,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'name',
            label: '姓名',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'gender',
            label: '性别',
            width: '',
            hasSort: false,
            isShow: true,
            columnFormatter: (row, column, value) => {
              return `<span>${row.gender === 1 ? '男' : '女'}</span>`;
            }
          },
          {
            prop: 'age',
            label: '年龄',
            width: '',
            hasSort: 'custom',
            isShow: true
          }
        ],
        // table - actions
        actions: {
          title: '操作',
          width: 160,
          links: [
            {
              label: '编辑',
              type: 'primary',
              handleLinkClick: row => {
                console.log('编辑--', row.id);
              },
              handleLinkShow: row => {
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '删除',
              type: 'danger',
              handleLinkClick: row => {
                console.log('删除--', row.id);
              },
              handleLinkShow: row => {
                if (row.id === 1) {
                  return false;
                }
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '绑定项目',
              handleLinkClick: row => {
                console.log('绑定项目--', row.id);
              },
              handleLinkShow: row => {
                if (row.id === 1) {
                  return false;
                }
                return true;
              }
            },
            {
              label: '清除密码',
              handleLinkClick: row => {
                console.log('清除密码--', row.id);
              },
              handleLinkShow: row => {
                if (row.id === 1) {
                  return false;
                }
                return true;
              }
            },
            {
              label: '启用',
              handleLinkClick: row => {
                console.log('启用--', row.id);
              },
              handleLinkShow: row => {
                if (row.id === 9) {
                  return false;
                }
                return true;
              }
            },
            {
              label: '禁用',
              color: '#FFB039',
              handleLinkClick: row => {
                console.log('禁用--', row.id);
              },
              handleLinkShow: row => {
                if (row.id === 9) {
                  return true;
                }
                return false;
              }
            }
          ]
        }
      };
    }
  },
  data() {
    return {
      roleName: '',
      tableMaxHeight: null,
      tableData: [],
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      }
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeightResize();

      // 监听窗口大小变化
      window.onresize = () => {
        this.tableHeightResize();
      };

      // 监听菜单栏的展开收起
      let sidebarEl = document.querySelector('.fold-icon');
      if (sidebarEl) {
        sidebarEl.addEventListener('click', () => {
          this.tableHeightResize();
        });
      }
    });
  },
  methods: {
    // 表格高度处理（示例）- 根据实际开发页面做相关调整即可
    tableHeightResize() {
      // 主内容区高度
      let mainContentEl = document.querySelector('.main');
      let mainContentHeight = mainContentEl ? mainContentEl.getBoundingClientRect().height : 0;

      // 页面标题高度
      let pageTitleEl = document.querySelector('.page-title');
      let pageTitleHeight = pageTitleEl ? pageTitleEl.getBoundingClientRect().height : 0;

      // 操作栏高度
      let operateBarEl = document.querySelector('.operate-bar');
      let operateBarHeight = operateBarEl ? operateBarEl.getBoundingClientRect().height : 0;

      // 表头高度
      let theadEl = document.querySelector('thead');
      let theadHeight = theadEl ? theadEl.getBoundingClientRect().height : 0;

      // 分页元素高度
      let pagationEl = document.querySelector('.common-pagination');
      let paginationHeight = pagationEl ? pagationEl.getBoundingClientRect().height : 0;

      // 表格高度
      this.tableMaxHeight = mainContentHeight - pageTitleHeight - operateBarHeight - theadHeight - paginationHeight;

      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let mainContentWidth = winInnerWidth - sidebarWidth - 30;
      mainContentWidth = mainContentWidth < 1030 ? 1030 : mainContentWidth;

      // 表格宽度
      let tableEl = document.querySelector('.el-table');
      tableEl.style.width = mainContentWidth - 40 + 'px';
    },
    // 获取表格数据
    getTableData() {
      let params = {
        pageIndex: this.paginationOptions.currentPage, //当前页
        pageSize: this.paginationOptions.pageSize //每页显示数据条数
      };

      let res = {
        data: {
          list: [],
          total: 33
        },
        status: 200,
        message: 'ok'
      };
      for (let i = 1; i <= 16; i++) {
        let obj = {
          id: i,
          name: '张三' + i,
          age: 10 + i,
          gender: i % 2 === 0 ? 0 : 1
        };

        res.data.list.push(obj);
      }

      this.tableData = res.data.list;
      this.paginationOptions.total = 23;
    },
    // 字段排序
    handleSortChange(column, prop, order) {
      console.log('handleSortChange---', column, prop, order);
    },
    // 多选
    handleSelectionChange(value) {
      console.log('handleSelectionChange---', value);
    }
  }
};
</script>

<style lang="scss" scoped>
.user-manage-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  overflow: hidden;

  .operate-bar {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
  }
}
</style>
